<template>
  <div>
    <!-- 头 -->
    <userTitel :title="title"></userTitel>
    <!-- 卡片 -->
    <el-card shadow="never" class="box-card">
      <div slot="header" class="clearfix">
        <span>作业范围分配</span>
        <el-button style="float: right" type="primary">编辑</el-button>
      </div>
      <div>
        <span>地区关键词 : </span>
        <el-input
          style="width: 230px"
          v-model="keyword"
          placeholder="请输入地区关键词"
        ></el-input>
        <!-- 警告 -->
        <el-alert
          :class="{ alert: a !== null }"
          show-icon
          center
          style="margin-top: 20px"
          title="当前越秀区营业部下暂无作业范围"
          type="warning"
        >
        </el-alert>
      </div>
      <div style="margin-top: 20px">
        <baidu-map
          :center="obj"
          :zoom="15"
          :scroll-wheel-zoom="true"
          id="allmap"
          @ready="mapReady"
        >
          <bm-local-search
            :keyword="keyword"
            :auto-viewport="true"
          ></bm-local-search>
          <!-- :editing="true"是否启用线编辑 -->
          <!-- lineupdate覆盖物的属性发生变化时触发 -->
          <bm-polygon
            :path="polygonPath"
            stroke-color="blue"
            :stroke-opacity="0.5"
            :stroke-weight="2"
            :editing="true"
            @lineupdate="updatePolygonPath"
          />
        </baidu-map>
      </div>
    </el-card>
  </div>
</template>

<script>
import { diTu } from "@/api/operational-range";
export default {
  name: "MapContent",
  data() {
    return {
      title: "作业范围分配",
      // 地图搜索
      keyword: "",
      //   地图
      point: "",
      //   折线构成的点
      polygonPath: [],
      obj: {},
      a: "",
    };
  },

  created() {
    // 行数据id
    console.log(this.$route.query);
    this.diScope();
  },

  methods: {
    // 地图多边形
    updatePolygonPath(e) {
      this.polygonPath = e.target.getPath();
    },
    // 地图
    mapReady({ BMap, map }) {
      // 选择一个经纬度作为中心点
      this.point = new BMap.Point(113.27, 23.13);
      map.centerAndZoom(this.point, 12);
    },
    // 根据id获取业务范围
    async diScope() {
      const res = await diTu(this.$route.query.userId, {
        0: this.$route.query.userId,
      });
      console.log(res.data.bid);
      this.a = res.data.bid;

      function newkey(arr, key) {
        let newArr = [];
        arr.forEach((item) => {
          let newObj = {};
          for (let i = 0; i < key.length; i++) {
            newObj[key[i]] = item[Object.keys(item)[i]];
          }
          newArr.push(newObj);
        });
        return newArr;
      }
      if (res.data.polygon !== null) {
        this.polygonPath = newkey(res.data.polygon, ["lng", "lat"]);
      } else {
        return false;
      }
      this.obj = { lng: res.data.longitude, lat: res.data.latitude };
      console.log(this.obj);
    },
  },
};
</script>

<style scoped lang="scss">
.alert {
  display: none;
}
/* 设定地图的大小 */
#allmap {
  height: 600px;
  width: 100%;
  margin: 0 auto;
}
.el-card {
  text-align: left;
  line-height: 24px;
}
</style>
